<!--
 * @Author: 徐伟杰
 * @Date: 2022-10-12 15:42:14
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-12-02 14:43:33
 * @Description: 
 * @Email: 1529315455@qq.com
 * @Company: 3xData
 * @youWant: 将附件的预览封装为一个组将，方便使用
 * 当文件为pdf时，应为一个查看文件的按钮；而为jpg、png等图片时，应该为图片框，且可以预览文件
-->
<template>
  <view>
    <view v-if="!judgeType">
      <button class="buttons" size="mini" @click="previewPdf" type="default">查看文件</button>
    </view>
    <view v-else class="box">
      <view v-for="(list, index) in newFileUrls" :key="index" style="margin-right: 20rpx;">
        <image mode="widthFix" class="images" @click="preview(index)" :src="baseApiUrl + list" />
      </view>
    </view>

    <web-view v-if="showAn" :src="pdfFileUrls"></web-view>
  </view>
</template>

<script>
import { baseApiUrl } from '@/config.js';
export default {
  data() {
    return {
      showAn: false, // 打开pdf文件
      pdfFileUrls: null, // pdf文件路径
      baseApiUrl: baseApiUrl,

      newFileUrls: [], // 文件数组
    }
  },
  props: {
    fileUrl: {
      type: String,
      default: ''
    }
  },
  computed: {
    judgeType() {
      if (this.fileUrl) {
        if (this.fileUrl.indexOf('pdf') != '-1') {
          return false
        } else {
          return true
        }
      }
    }
  },
  watch: {
    fileUrl: {
      handler(newVal, oldVal) {
        this.newFileUrls = newVal.split(',')
      },
      immediate: false
    }
  },
  created() {
    setTimeout(() => {
      this.newFileUrls = this.fileUrl.split(',')
    }, 1000);
  },
  methods: {
    // 预览文件
    previewPdf() {
      let that = this
      this.pdfFileUrls = this.baseApiUrl + that.fileUrl
      uni.showLoading({
        title: '打开文件中！'
      });
      uni.getSystemInfo({
        success: res => {
          if (res.platform === 'android') {
            that.showAn = false
            const url = this.baseApiUrl + this.fileUrl
            uni.downloadFile({
              url,
              success: ({ statusCode, tempFilePath }) => {
                if (statusCode === 200) {
                  uni.saveFile({
                    tempFilePath,
                    success: (res) => {
                      uni.openDocument({
                        filePath: res.savedFilePath,
                        success: (res) => {
                          uni.hideLoading();
                          console.log('成功打开文档')
                        }
                      })
                    },
                    fail: () => {
                      console.log('下载失败')
                    }
                  })
                }
              }
            })
          } else {
            that.showAn = true
            uni.hideLoading();
          }
        }
      })
    },
    // 预览图片
    preview(index) {
      const url = this.newFileUrls.map(item => {
        return this.baseApiUrl + item
      })
      uni.previewImage({
        current: index,
        urls: url,
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.images {
  width: 180rpx;
  height: 180rpx;
  border: 1rpx solid #E6E6E6;
  margin-top: 20rpx;
}

.box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.buttons {
  background: $OVERALL_SITUATION_BACKGROUND !important;
  font-size: 24rpx;
  color: #FFFFFF;
  margin-top: 20rpx;
}
</style>